<template>
  <div id="div-1" class="w-4/5 mx-auto bg-white">
    <a-typography-paragraph id="div-2" class="mt-2">
      <a-image :src="indexImage" width="100%" id="banner" :preview="false"></a-image>
      <a-typography-paragraph class="flex !m-0 gap-8 w-full h-10 items-center justify-center" id="div-2-2">
        <a-typography-paragraph :key="index" v-for="(item, index) in 3" :id="`div-2-2-atp${index}`" class="inline-block !m-0 h-2 w-2 rounded-full" :class="index == 2 ? 'bg-red-600': 'bg-gray-400'"></a-typography-paragraph>
      </a-typography-paragraph>
    </a-typography-paragraph>
    <a-flex id="div-4" class="p-6 gap-2 bg-gray-200 relative">
      <a-typography-paragraph class="absolute left-0 bottom-10 flex !m-0 gap-8 w-full h-10 items-center justify-center" id="div-2-2">
        <a-typography-paragraph :key="index" v-for="(item, index) in 3" :id="`div-2-2-atp${index}`" class="inline-block !m-0 h-2 w-2 rounded-full" :class="index == 1 ? 'bg-red-600': 'bg-gray-400'"></a-typography-paragraph>
      </a-typography-paragraph>
      <a-typography-paragraph class="px-8" id="left">
        <a-typography-text class="block" id="left1">最</a-typography-text>
        <a-typography-text class="block" id="left2">新</a-typography-text>
        <a-typography-text class="block" id="left3">动</a-typography-text>
        <a-typography-text class="block" id="left4">态</a-typography-text>  
      </a-typography-paragraph>
      <a-flex :vertical="true" class="basis-3/5" id="center">
        <a-typography-title id="center-title" :level="4" class="mt-6">肯德基中国门店突破10,000家，“永远好滋味”一直“在路上”</a-typography-title>
        <a-typography-paragraph class="mt-10" id="center-content">2023年12月15日，杭州—今日，肯德基京杭大运河餐厅在杭州武林门码头盛大开业。至此，作为中国领先及最大的快餐品牌，肯德基中国门店规模正式突破10,000家，这是品牌历史上又一重要的里程碑时刻。</a-typography-paragraph>
        <a-typography-link id="center-link" class="mt-40 border-1 border-gray-400 border-solid bg-white py-4 text-center !text-gray-800 max-w-[180px]">更多新闻<ArrowRightOutlined class="text-red-400 ml-4"/></a-typography-link>
      </a-flex>
      <a-typography-paragraph class="px-8" id="right">
        <a-image class="basis-2/5" id="right-img" :src="listImage" :preview="false"></a-image>
      </a-typography-paragraph>
    </a-flex>
    <a-typography-paragraph id="footer" class="p-6 pb-16 gap-2 bg-gray-200 min-h-[300px] mt-32 relative justify-end items-center text-center flex flex-col">
      <a-typography-paragraph class="absolute -top-20" id="footer-top">
        <a-image :src="bottomImage" :preview="false" width="80%" id="footer-top-img"></a-image>
      </a-typography-paragraph>
      <a-flex class="gap-4 px-[10%]" id="footer-bottom">
        <a-flex class="!m-0" v-for="(item, index) in imgs" :key="index" :id="`atps-${index}`">
          <a-image :id="`imgs-${index}`" :src="item" :preview="false"></a-image>
          <a-divider :id="`divider-${index}`" type="vertical" class="h-full ml-6 bg-black" v-show="index == 0"/>
        </a-flex>
      </a-flex>
    </a-typography-paragraph>
  </div>
</template>
<script setup>
const indexImage = "https://picsum.photos/id/0/1080/300";
const listImage = 'https://picsum.photos/id/1/600/400';
const bottomImage = 'https://picsum.photos/id/10/1080/220';

const imgs = ['https://picsum.photos/id/2/260/90', 'https://picsum.photos/id/3/90/90 ', 'https://picsum.photos/id/4/90/90 ', 'https://picsum.photos/id/5/90/90 ', 'https://picsum.photos/id/6/90/90 ','https://picsum.photos/id/7/90/90  ', 'https://picsum.photos/id/8/90/90  ']

</script>
<style scope>
</style>
